import 'dart:async';

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

class Launch extends StatelessWidget {
  const Launch({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: AssetImage('images/launch-bg.png'),
                fit: BoxFit.cover,
              ),
            ),
            child: SafeArea(
              child: Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height,
                decoration: const BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage('images/launch-bg-bubble.png'),
                    fit: BoxFit.cover,
                  ),
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    buildLogo(),
                    SizedBox(
                      width: 280,
                      child: ElevatedButton(
                        onPressed: () {
                          context.go("/login");
                        },
                        child: const Text("Log in"),
                      ),
                    ),
                    const SizedBox(height: 10),
                    SizedBox(
                      width: 280,
                      child: FilledButton(
                        onPressed: () {},
                        child: const Text("Create an account"),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  /// logo
  Widget buildLogo() => Column(
        children: <Widget>[
          Image.asset(
            'images/logo.png',
            width: 100,
            height: 100,
          ),
          const Text(
            'Home Community Smart Living',
            style: TextStyle(
              color: Color(0xFF6E7191),
            ),
          ),
          const SizedBox(height: 50),
          const UserAnimation(),
          const SizedBox(height: 60)
        ],
      );
}

class UserAnimation extends StatefulWidget {
  const UserAnimation({super.key});

  @override
  State<UserAnimation> createState() => _UserAnimationState();
}

class _UserAnimationState extends State<UserAnimation> {
  bool isLoad = false;

  @override
  Widget build(BuildContext context) {
    if (!isLoad) {
      Timer.periodic(const Duration(microseconds: 500), (timer) {
        setState(() {
          isLoad = true;
        });
        timer.cancel();
      });
    }

    return SizedBox(
      width: 300,
      height: 200,
      child: Stack(
        children: [
          OverflowBox(
            child: AnimatedAlign(
              alignment: isLoad ? Alignment.topCenter : Alignment.center,
              duration: const Duration(seconds: 1),
              curve: Curves.easeInOut,
              child: Image.asset(
                "images/launch-user1.png",
                width: 110,
                height: 110,
              ),
            ),
          ),
          AnimatedAlign(
            alignment: isLoad ? Alignment.centerLeft : Alignment.center,
            duration: const Duration(seconds: 1),
            curve: Curves.easeInOut,
            child: Image.asset(
              "images/launch-user2.png",
              width: 110,
              height: 110,
            ),
          ),
          AnimatedAlign(
            alignment: isLoad ? Alignment.centerRight : Alignment.center,
            duration: const Duration(seconds: 1),
            curve: Curves.easeInOut,
            child: Image.asset(
              "images/launch-user3.png",
              width: 140,
              height: 140,
            ),
          ),
          AnimatedAlign(
            alignment: isLoad ? Alignment.bottomCenter : Alignment.center,
            duration: const Duration(seconds: 1),
            curve: Curves.easeInOut,
            child: Image.asset(
              "images/launch-user4.png",
              width: 130,
              height: 130,
            ),
          ),
        ],
      ),
    );
  }
}
